import Note from "./component/note";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useState, useEffect } from "react";
import { ArrowLeft } from "@nutui/icons-react-taro";
const Profile = () => {
  const [opusUid, setOpusUid] = useState("");
  const [narBarInfo, setNarBarInfo] = useState({
    height: 0,
    paddingX: 0,
    paddingBottom: 40,
    menuButtonInfoHeight: 0,
  });
  useEffect(() => {
    // 获取系统信息
    const systemInfo = Taro.getSystemInfoSync();
    // 获取胶囊信息
    const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
    const statusBarHeight = systemInfo.statusBarHeight ?? 44;
    const menuButtonInfoHeight = menuButtonInfo.height;
    const menuButtonStatusBarGap = menuButtonInfo.top - statusBarHeight;
    const navBarHeight =
      menuButtonStatusBarGap * 2 + menuButtonInfoHeight + statusBarHeight;
    const paddingX = systemInfo.screenWidth - menuButtonInfo.right;
    const paddingBottom =
      navBarHeight - (menuButtonInfoHeight + menuButtonInfo.top);
    setNarBarInfo({
      height: navBarHeight,
      paddingX: paddingX,
      menuButtonInfoHeight: menuButtonInfoHeight,
      paddingBottom: paddingBottom,
    });
  }, []);
  return (
    <View className="min-h-screen">
      <View
        style={{
          height: narBarInfo.height + "px",
        }}
        className="bg-white relative"
      >
        <View
          style={{
            height: narBarInfo.menuButtonInfoHeight + "px",
            bottom: narBarInfo.paddingBottom + "px",
          }}
          className={`w-full absolute left-0 text-center font-normal text-[17px] flex justify-center items-center`}
        >
          {"笔记合集"}
        </View>
        <ArrowLeft
          onClick={() => {
            if (opusUid) {
              Taro.navigateBack({
                fail: () => {
                  Taro.redirectTo({
                    url: `/pages/course-detail/index?opusUid=${opusUid}`,
                  });
                },
              });
            }
          }}
          style={{
            left: narBarInfo.paddingX + "px",
            bottom: narBarInfo.paddingBottom + "px",
            height: narBarInfo.menuButtonInfoHeight + "px",
          }}
          className={`!absolute !flex justify-center items-center`}
        />
      </View>
      <View
        style={{
          height: `calc(100vh - ${narBarInfo.height}px)`,
        }}
      >
        <Note setOpusUid={setOpusUid} />
      </View>
    </View>
  );
};
export default Profile;
